<template>
  <a-card :bordered="false">

    <!-- table区域-begin -->
    <div>
      <a-alert type="info" showIcon style="margin-bottom: 16px;">
        <template slot="message">
          已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a> 项
          <template v-if="selectedRowKeys.length > 0">
            <a-divider type="vertical"/>
            <a @click="onClearSelected">清空选择</a>
            <a-divider type="vertical"/>
            <a-dropdown>
              <a-menu slot="overlay">
                <a-menu-item key="1" @click="handleRevertBatch">
                  <a-icon type="redo"/>
                  <span>还原</span>
                </a-menu-item>
                <a-menu-item key="2" @click="handleDeleteBatch">
                  <a-icon type="delete"/>
                  <span>彻底删除</span>
                </a-menu-item>
              </a-menu>
              <a>
                <span>批量操作</span>
                <a-icon type="down"/>
              </a>
            </a-dropdown>
          </template>
        </template>
      </a-alert>

      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="downloadFile(text)">
            下载
          </a-button>
        </template>

        <div slot="action" slot-scope="text, record">
          <a @click="handleRevert([record.id])">
            <a-icon type="redo"/>
            还原
          </a>
          <a-divider type="vertical"/>
          <a @click="handleDelete([record.id])">
            <a-icon type="delete"/>
            彻底删除
          </a>
        </div>

      </a-table>
    </div>

  </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import LowAppMenuType from './constant/LowAppMenuType'
import { deleteAction, putAction } from '@api/manage'

export default {
  name: 'LowAppMenuRecycleBin',
  mixins: [JeecgListMixin, mixinDevice],
  components: {},
  data() {
    return {
      description: 'low_app_menu管理页面',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '菜单名称',
          align: 'center',
          dataIndex: 'menuName'
        },
        {
          title: '菜单类型',
          align: 'center',
          dataIndex: 'type',
          customRender: function (t, r, index) {
            let type = LowAppMenuType.valueOf(t)
            if (type != null) {
              return type.name
            }
            return t
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 147,
          scopedSlots: {customRender: 'action'}
        }
      ],
      url: {
        list: '/online/lowAppMenu/recycleBin',
        revertRecycleBin: '/online/lowAppMenu/revertRecycleBin',
        deleteRecycleBin: '/online/lowAppMenu/deleteRecycleBin',
      },
      dictOptions: {},
    }
  },
  created() {
  },
  computed: {},
  methods: {

    // 批量恢复
    handleRevertBatch() {
      this.handleRevert(this.selectedRowKeys)
    },
    // 批量删除 o2ulDNOXGwvBRndehxW14dML+i/qxuVry2u3TXIhR9CrYEbhZi7RywQnYojV/SgC/PffdTE3WKU0/u0CXtgFzw==
    handleDeleteBatch() {
      this.handleDelete(this.selectedRowKeys)
    },
    // 彻底删除菜单
    handleDelete(ids) {
      this.$confirm({
        title: '彻底删除菜单',
        content: (<div>
          <p>您确定要彻底删除这 {ids.length} 个菜单吗？</p>
          <p style="color:red;">注意：彻底删除后将无法恢复，请谨慎操作！</p>
        </div>),
        centered: true,
        onOk: () => {
          deleteAction(this.url.deleteRecycleBin, {ids: ids.join(',')}).then((res) => {
            if (res.success) {
              this.loadData()
              this.handleClearSelection()
              this.$message.success(`彻底删除 ${ids.length} 个菜单成功！`)
            } else {
              this.$message.warning(res.message)
            }
          })
        },
      })
    },
    // 还原菜单
    handleRevert(ids) {
      this.$confirm({
        title: '还原菜单',
        content: `您确定要恢复这 ${ids.length} 个菜单吗？`,
        centered: true,
        onOk: () => {
          putAction(this.url.revertRecycleBin, {ids: ids.join(',')}).then((res) => {
            if (res.success) {
              this.$emit('ok')
              this.loadData()
              this.handleClearSelection()
              this.$message.success(`还原 ${ids.length} 个菜单成功！`)
            }
          })
        }
      })
    },
    handleClearSelection() {
      this.handleTableSelectChange([], [])
    },
    handleTableSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
    },

  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
